<template>
  <div>
    <headers :head_title="head_title" />

    <main>
      <van-tabs v-model:active="active" color="#1989fa" title-active-color="#1989fa">
        <van-tab title="健康资讯">
          <!-- 收藏的健康资讯-->
          <div
            v-for="(item, index) in myArray_message_list"
            :key="index"
            class="consult_list"
            @click="detail(item.infoId)"
          >
            <img :src="item.thumbnail" alt="First Image" class="consult_img" />
            {{ item.title }}
          </div>
        </van-tab>

        <!-- 购买的视频 -->
        <van-tab title="健康视频">
          <div v-for="(item, index) in myArray_video_list" :key="index">
            <div class="collect_video">
              <p>{{ item.title }}</p>
              <video :src="item.originalUrl" autoplay muted class="fullscreen-video"></video>
              <div>
                <p>视频时长:{{ item.duration }}s</p>
                <p>视频购买时间:{{ item.createTime }}</p>
              </div>
            </div>
          </div>
        </van-tab>
        <!-- 收藏的病友圈 -->
        <van-tab title="病友圈">
          <div v-for="(item, index) in byq_collect" :key="index">
            <div class="collect_byq">
              <p class="collect_byq_title">{{ item.title }}</p>
              <div>{{ item.disease }}</div>
              <div class="collect_byq_time" style="font-size: 22px">
                <p>
                  <span>收藏 {{ item.collectionNum }}</span> 建议 <span>{{ item.commentNum }}</span>
                </p>
                <p class="collect_byq_time_1">时间:{{ item.createTime }}</p>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script setup lang="ts">
import headers from '@/components/header.vue'
import http from '@/utils/http'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
// pinia实验
// import { useMyStore } from '@/stores/my_Store'

//调用api实现渲染 getUserInfoCollectionList
import { findUserSickCollectionList } from '@/api/api'
import { findVideoCollectionList } from '@/api/api'
import { getUserInfoCollectionList } from '@/api/api'
import { Loading } from 'vant'
// console.log(findUserSickCollectionList());

const head_title = ref('我的收藏')
const active = ref('first')

const router = useRouter()
// 获取Pinia仓库实例
// const myStore = useMyStore()
// 使用ref响应式获取数组数据，方便在模板中使用
// const myArray = ref(myStore.getArray())
// console.log(myArray.value)
// 获取病友圈数据
const byq_collect = ref([])
const page = ref(1)
const count = ref(5)
const userId = ref(parseInt(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
//获取收藏的病友圈数据，用于渲染
const gitbyqcollect = async () => {
  try {
    const res = await findUserSickCollectionList(userId.value, sessionId.value, {
      page: page.value,
      count: count.value,
    })
    console.log('用户收成病友圈列表', res)
    Loading.value = true //开启加载动画
    console.log(res)
    byq_collect.value = res.data.result
    console.log(byq_collect.value)
  } catch (e) {
    console.log('数据获取失败')
  }
}
gitbyqcollect()

// 获取收藏咨询并渲染
const myArray_message_list = ref([])
const collect_message = async () => {
  try {
    // 调用获取用户咨询列表的API
    const res = await getUserInfoCollectionList(userId.value, sessionId.value, {
      // 分页参数
      page: page.value,
      count: count.value,
    })
    // 打印获取到的用户咨询列表
    console.log('用户收咨询列表', res)
    // 开启加载动画
    Loading.value = true //开启加载动画
    // 打印获取到的用户咨询列表
    console.log(res)
    // 将获取到的用户咨询列表赋值给myArray_message_list
    myArray_message_list.value = res.data.result

    // 打印赋值后的myArray_message_list
    console.log(myArray_message_list.value)
  } catch (e) {
    // 打印数据获取失败信息
    console.log('数据获取失败')
  }
}
collect_message()

// 获取购买的视频并渲染
const myArray_video_list = ref([])
const collect_video = async () => {
  try {
    const res = await findVideoCollectionList(userId.value, sessionId.value, {
      page: page.value,
      count: count.value,
    })
    console.log('用户收视频列表', res)
    Loading.value = true //开启加载动画
    console.log(res)
    myArray_video_list.value = res.data.result
    console.log(myArray_video_list.value)
  } catch (e) {
    console.log('数据获取失败')
  }
}
collect_video()

const data = [
  {
    name: '欧若拉',
    img: 'images',
  },
]

const detail = (id) => {
  router.push({
    name: 'shoudetail',
    params: {
      id: id,
    },
  })
  console.log(id)
}
</script>

<style scoped lang="scss">
.demo-tabs > .el-tabs__content {
  width: 100%;
  padding: 16px; // 32px * 0.5 = 16px
  color: #6b778c;
  font-size: 12px; // 32px * 0.5 = 16px
  font-weight: 600;
}
main {
  width: 100%;
}
el-tab-pane {
  line-height: 250px; // 500px * 0.5 = 250px
}

.consult_list {
  display: flex;
  margin: 7.5px; // 15px * 0.5 = 7.5px
}
.consult_img {
  width: 100px; // 200px * 0.5 = 100px
  height: 85px; // 170px * 0.5 = 85px
  margin: 0 5px; // 10px * 0.5 = 5px
}

.collect_byq {
  margin: 15px;
  margin-top: 0px;
  // background: red;
  border-bottom: #eee solid 3px;
}
.collect_byq_title {
  font-size: 14px;
  margin: 5px;
}

.collect_byq > div {
  font-size: 12px;
  margin: 5px;
}

.collect_byq_time {
  // font-size: 11px !import;
  display: flex;
  justify-content: space-between;
  margin: 5px;
}
.collect_byq_time_1 {
  margin-right: 10px;
}

.collect_video {
  display: flex;
  flex-direction: column;
  margin: 15px;
  margin-top: 15px;
  background: #f2f2f2;
}

.fullscreen-video {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
</style>
